<template>
	<r-button size="large" :type="type" :color="color" :icon="icon" :loading="loading" :disabled="disabled" :customStyle="customStyle" @click="onClick">
		<slot v-if="$slots.default"></slot>
		<text v-else>{{ text }}</text>
	</r-button>
</template>
<script setup>
import { datas } from '../themes/index.js';
import { ACTION_BAR_KEY, CONFIG_PROVIDER_KEY } from '@/uni_modules/r-utils-constant/js_sdk/index.js';
import { uniqueId } from '@/uni_modules/r-utils-common/js_sdk/index.js';
import { getComponentThemeCssVar } from '@/uni_modules/r-theme-base/js_sdk/useComponentTheme.js';
import { inject, computed, ref, onMounted } from 'vue';
const emit = defineEmits(['click']);
const props = defineProps({
	// 按钮文字
	text: {
		type: String,
		default: ''
	},
	type: {
		type: String,
		default: 'default'
	},
	//   按钮颜色
	color: {
		type: String,
		default: ''
	},
	//   左侧图标名称
	icon: {
		type: String,
		default: ''
	},
	disabled: {
		type: Boolean,
		default: false
	},
	loading: {
		type: Boolean,
		default: false
	}
});

const componentsName = 'r-action-bar-button';
const componentsId = ref(null);
const themeInject = inject(CONFIG_PROVIDER_KEY, {});

const getComponentThemeStyle = computed(() => {
	let themeName = props.themeName;

	if (themeInject?.value?.themeName) {
		//传递过来的有就用传递了
		themeName = themeInject?.value?.themeName;
	}
	if (props.themeName != 'default') {
		//单独设置了组件的 就用单独设置的
		themeName = props.themeName;
	}

	return {
		...getComponentThemeCssVar(themeName, 'r-base', datas.value),
		...getComponentThemeCssVar(themeName, componentsName, datas.value)
	};
});

const parentInject = inject(ACTION_BAR_KEY, {});

const isFirst = computed(() => {
	if (parentInject?.children?.value?.length) {
		if (parentInject.children.value[0].id == componentsId.value) {
			return true;
		}
	}
	return false;
});

const isLast = computed(() => {
	if (parentInject?.children?.value?.length) {
		if (parentInject.children.value[parentInject.children.value.length - 1].id == componentsId.value) {
			return true;
		}
	}
	return false;
});

const customStyle = computed(() => {
	const cssVar = {
		width: '100%',
		flex: 1,
		height: 'var(--r-action-bar-button-height)',
		fontWeight: 'var(--r-font-bold)',
		fontSize: 'var(--r-font-size-md)',
		border: 'none',
		borderRadius: 0
	};
	if (props.type == 'warning') {
		cssVar.background = 'var(--r-action-bar-button-warning-color)';
	}
	if (props.type == 'danger') {
		cssVar.background = 'var(--r-action-bar-button-danger-color)';
	}

	if (props.color) {
		cssVar.background = props.color;
	}
	if (isFirst.value) {
		cssVar.width = 'calc(100% - 10rpx)';
		cssVar.marginLeft = '10rpx';
		cssVar.borderTopLeftRadius = 'var(--r-radius-max)';
		cssVar.borderBottomLeftRadius = 'var(--r-radius-max)';
	}

	if (isLast.value) {
		cssVar.width = 'calc(100% - 10rpx)';
		cssVar.marginRight = '10rpx';
		cssVar.borderTopRightRadius = 'var(--r-radius-max)';
		cssVar.borderBottomRightRadius = 'var(--r-radius-max)';
	}
	return {
		...getComponentThemeStyle.value,
		...cssVar
	};
});
const onClick = (e) => emit('click', e);
onMounted(() => {
	componentsId.value = uniqueId(componentsName + '-');
	if (parentInject && parentInject.setChildren) {
		parentInject.setChildren({
			id: componentsId.value
		});
	}
});
</script>
<style lang="scss" scoped>
.r-action-bar-button {
	flex: 1;
	height: var(--r-action-bar-button-height);
	font-weight: var(--r-font-bold);
	font-size: var(--r-font-size-md);
	border: none;
	border-radius: 0;

	&--first {
		margin-left: 5px;
		border-top-left-radius: var(--r-radius-max);
		border-bottom-left-radius: var(--r-radius-max);
	}

	&--last {
		margin-right: 5px;
		border-top-right-radius: var(--r-radius-max);
		border-bottom-right-radius: var(--r-radius-max);
	}

	&--warning {
		background: var(--r-action-bar-button-warning-color);
	}

	&--danger {
		background: var(--r-action-bar-button-danger-color);
	}

	@media (max-width: 321px) {
		font-size: 13px;
	}
}
</style>
